import { FC } from "react"
import { useMemo } from "react"
import { CssBaseline } from "@mui/material"
import { ThemeProvider as MUIThemeProvider, createTheme, StyledEngineProvider } from "@mui/material/styles"
import palette from "./palette"
import typography from "./typography"
import componentsOverride from "./overrides"
import shadows, { customShadows } from "./shadows"
import { zhCN, enUS } from "@mui/material/locale"
import { getLocaleLan } from "../utils/helper"

const ThemeProvider: FC = ({ children }) => {
  const initialLanguage = getLocaleLan()
  let initialMuiLanguage = enUS
  if (initialLanguage === "zh_CN") initialMuiLanguage = zhCN

  const themeOptions = useMemo(
    () => ({
      palette,
      shape: { borderRadius: 8 },
      typography,
      shadows,
      customShadows,
    }),
    []
  )

  const theme = createTheme(themeOptions, initialMuiLanguage)
  theme.components = componentsOverride(theme)

  return (
    <StyledEngineProvider injectFirst>
      <MUIThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </MUIThemeProvider>
    </StyledEngineProvider>
  )
}

export default ThemeProvider
